<template>
  <view class="container">
    <!-- 数据表格 -->
    <uni-table border stripe>
      <uni-tr>
        <uni-th align="center">设备名称</uni-th>
        <uni-th align="center">设备有效期</uni-th>
        <uni-th align="center">设置</uni-th>
      </uni-tr>
      <uni-tr v-for="item in mockData.value" :key="item.id">
        <uni-td align="center">{{ item.gpsname }}</uni-td>
        <uni-td align="center">{{ item.periodOfValidity }}</uni-td>
        <uni-td align="center">
          <view class="uni-group">
            <button class="uni-button" size="mini" type="primary" style="background-color: #4e6bb9" @click="positioning(item)" >
              定位
            </button>
          </view>
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { UserSbMeesage } from '@/services/device'
import { useTabParamsStore } from '@/stores/modules/shebei'

const tabParamsStore = useTabParamsStore()
// 模拟数据
const mockData =reactive([])
const positioning=(val)=>{
console.log(val.imei,'--');
 // 存储参数
 tabParamsStore.setParams(val)
uni.switchTab({
    url: '/pages/indexs/index', // 目标页面路径
  })
}

onMounted(() => {
  getData()
})

const getData = async () => {
  const res = await UserSbMeesage()
  mockData.value = res.data||[]
  console.log(mockData, '11111')
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.uni-table {
  margin: 20rpx 0;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.status {
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 24rpx;

  &.active {
    color: #67c23a;
    background-color: #f0f9eb;
  }

  &.inactive {
    color: #909399;
    background-color: #f4f4f5;
  }

  &.pending {
    color: #e6a23c;
    background-color: #fdf6ec;
  }
}

.pagination {
  margin-top: 30rpx;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
}
</style>
